<template>
    <label>
        <div>{{title}}</div>
        <input v-model="content" /><!-- 相当于<input :value="content" @input="change" /> -->
        <span>{{webname1.name}}</span>
        <span>{{webname2}}</span>
    </label>
</template>

<script>
    export default {
        inject:["webname1","webname2"],
        props:["title","modelValue"],
        emits:['update:modelValue'],
        data() {
            return{
                content : this.modelValue
            }
        },
        methods:{
            change(event){
                this.content = event.target.value;
            }
        },
        watch:{
            content(v){
                this.$emit('update:modelValue',v)
            }
        }
    }
</script>

<style lang="scss" scoped>
    label{
        display:flex;
        align-items: center;
        margin-bottom:10px;
        div{
            color:#666;
            font-size: 14px;;
            margin-right:10px;
            width:80px;
        }
        input{
            outline:none;
            border: 1px solid #ddd;
            color:#666;
            padding:5px 10px;
        }
    }
</style>